import React, { useEffect, useState } from 'react'
import { Breadcrumb } from 'antd';
import { useLocation, Link } from 'react-router-dom';
import { LeftOutlined } from '@ant-design/icons';


const breadcrumbNameMap = {
    '/home': '首页',
    '/absent/my': '个人考勤',
    '/absent/sub': '下属考勤',
    '/inform/publish': '发布通知',
    '/inform/list': '通知列表',
    '/staff/add': '新增员工',
    '/staff/list': '用户列表'
}




export default function OaBreadcrumb() {
    let [breadcrumbName, setBreadcrumbName] = useState('')
    const location = useLocation();

    useEffect(() => {
        setBreadcrumbName(breadcrumbNameMap[location.pathname])
    }, [location])

    return (
        <Breadcrumb style={{ marginBottom: '20px', fontSize: '18px', color: '#000000' }} separator="|"
            items={[
                {
                    title: <Link to='/home'>{<LeftOutlined />} 首页</Link>,
                },
                {
                    title: breadcrumbName,
                }
            ]}
        />
    )
}
